<template>
  <div class="ptz-box" v-show="ifShow || ifShow2" @dblclick.stop @click.stop>
    <div class="ptz-margin">
      <div class="box-class">
        <div class="box-left" @click="turnPtzCheck()">
          <i
            class="iconfont icon-guotu_icon_PTZ"
            :class="{ checked: turnPtzFlag }"
            c-tip="转动到PTZ"
            c-tip-class="c-tip-normal"
          ></i>
        </div>
        <div class="box-right1" v-show="turnPtzFlag">
          <el-input
            class="placeholder-box"
            type="text"
            v-model="pan"
            placeholder="P"
            @input="numberInput('pan')"
          ></el-input>
          <el-input
            class="placeholder-box"
            type="text"
            v-model="tilt"
            placeholder="T"
            @input="numberInput('tilt')"
          ></el-input>
          <el-input
            class="placeholder-box"
            type="text"
            v-model="zoom"
            placeholder="Z"
            @input="numberInput('zoom')"
          ></el-input>
          <div class="button-box" @click="turnPtz">转动</div>
        </div>
      </div>
      <div class="box-class" style="position: relative; z-index: 2">
        <div class="box-left" @click="prePointCheck()">
          <i
            class="iconfont icon-guotu_icon_yuzhidian"
            :class="{ checked: prePointFlag }"
            c-tip="转动到预置位"
            c-tip-class="c-tip-normal"
          ></i>
        </div>
        <div class="box-right2" v-show="prePointFlag">
          <el-select
            class="placeholder-box"
            popper-class="c-select-dropdown un-to-body-dowm"
            :popper-append-to-body="false"
            placeholder="预置位"
            v-model="selectedPre"
          >
            <el-option
              v-for="dict in prePoints"
              :key="dict.presetId"
              :label="dict.presetName"
              :value="dict.presetId"
            ></el-option>
          </el-select>
          <div class="button-box" @click="gotoPrePoint()">转动</div>
        </div>
      </div>
      <div class="box-class">
        <div class="box-left" @click="ptzCheck()">
          <i
            class="iconfont icon-guotu_icon_huoquPTZ"
            :class="{ checked: ptzFlag }"
            c-tip="PTZ信息"
            c-tip-class="c-tip-normal"
          ></i>
        </div>
        <div class="box-right3" v-show="ptzFlag">
          <div>P:{{ resultPan }}</div>
          <div>T:{{ resultTilt }}</div>
          <div>Z:{{ resultZoom }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryPtzPosition } from "@/api/video/videoPTZ";
import {
  queryPtzPositionNew,
  queryPresetList,
  doPtzLocationCmd,
  doControlPreset,
} from "@/api/video/video";

export default {
  name: "videoPTZ",
  data() {
    return {
      pan: null,
      tilt: null,
      zoom: null,
      selectedPre: "", //选中的预置位
      prePoints: [], //预置位
      resultPan: 0,
      resultTilt: 0,
      resultZoom: 0,
      turnPtzFlag: false, //转动ptz开关
      prePointFlag: false, //转动预置点开关
      ptzFlag: false, //显示ptz开关
    };
  },
  props: {
    PTZData: {
      type: Object,
      default: {},
    },
    ifShow: {
      type: Boolean,
      default: false,
    },
    ifShow2: {
      type: [Boolean, String, Number],
      default: false,
    },
    isFull: {
      default: false,
    },
    vueIns: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    ifShow: {
      handler(val) {
        if (!val && !this.ifShow2) {
          this.turnPtzFlag = false; //转动ptz开关
          this.prePointFlag = false; //转动预置点开关
          this.ptzFlag = false; //显示ptz开关
        }
      },
      immediate: true,
    },
    ifShow2: {
      handler(val) {
        if (!val && !this.ifShow) {
          this.turnPtzFlag = false; //转动ptz开关
          this.prePointFlag = false; //转动预置点开关
          this.ptzFlag = false; //显示ptz开关
        }
        if (val) {
          this.turnPtzCheck(this.turnPtzFlag);
          this.prePointCheck(this.prePointFlag);
          this.ptzCheck(this.ptzFlag);
        }
      },
      immediate: true,
    },
  },
  methods: {
    //数字录入
    numberInput(key) {
      if (isNaN(Number(this[key])) && this[key] !== "-") {
        this[key] = this[key + "Old"] || "";
      } else {
        this[key] = this[key].replace(/[. ]/g, "");
        this[key + "Old"] = this[key];
      }
    },
    //查询当前位置的PTZ
    getPtzLocation() {
      console.info(this.PTZData);
      let param = {
        deviceCode: this.PTZData.sources[0].camera.deviceCode, //设备编码
        channelCode: this.PTZData.sources[0].camera.channelCode, //通道编码
      };
      //租户
      let tenId =
        Object.keys(this.vueIns).length === 0
          ? this.$store.getters.userInfo.tenantId
          : this.vueIns.$store.getters.userInfo.tenantId;
      if (tenId) {
        queryPtzPosition(param).then((res) => {
          if (res.code == 200) {
            this.resultPan = res.data.pan;
            this.resultTilt = res.data.tilt;
            this.resultZoom = res.data.zoom;
          } else {
            $message.a(res);
          }
        });
      } else {
        //铁塔
        queryPtzPositionNew(param).then((res) => {
          if (res.code == 200) {
            this.resultPan = res.data.pan;
            this.resultTilt = res.data.tilt;
            this.resultZoom = res.data.zoom;
          } else {
            $message.a(res);
          }
        });
      }
    },
    //查询预置位列表
    getPrePoint() {
      let params = {
        deviceCode: this.PTZData.sources[0].camera.deviceCode, //设备编码
        channelCode: this.PTZData.sources[0].camera.channelCode, //通道编码
      };
      this.prePoints = [];
      queryPresetList(params).then((res) => {
        if (res.code == 200) {
          this.prePoints = JSON.parse(JSON.stringify(res.data));
        } else {
          $message.a(res);
        }
      });
    },
    turnPtzCheck(turnPtzFlag = !this.turnPtzFlag) {
      this.turnPtzFlag = turnPtzFlag;
      if (this.turnPtzFlag) {
        this.pan = "";
        this.tilt = "";
        this.zoom = "";
      }
    },
    //
    prePointCheck(prePointFlag = !this.prePointFlag) {
      this.prePointFlag = prePointFlag;
      if (this.prePointFlag) {
        this.selectedPre = "";
        if (this.PTZData.sources[0].singlePresetId) {
          this.selectedPre = this.PTZData.sources[0].singlePresetId;
        }
        this.getPrePoint();
      }
    },
    ptzCheck(ptzFlag = !this.ptzFlag) {
      console.log("===============================");
      this.ptzFlag = ptzFlag;
      if (this.ptzFlag) {
        this.getPtzLocation();
      }
    },
    // 转到ptz
    turnPtz() {
      if (
        this.pan < 0 ||
        this.pan > 360 ||
        !this.checknumber(this.pan) ||
        this.pan.split(" ").length > 1
      ) {
        $message.e("P值输入不合法!");
        return;
      }
      if (
        this.tilt < -90 ||
        this.tilt > 90 ||
        !this.checknumber(Math.abs(this.tilt)) ||
        this.tilt.split(" ").length > 1
      ) {
        $message.e("T值输入不合法!");
        return;
      }
      if (
        this.zoom < 1 ||
        this.zoom > 50 ||
        !this.checknumber(this.zoom) ||
        this.zoom.split(" ").length > 1
      ) {
        $message.e("Z值输入不合法!");
        return;
      }
      let params = {
        deviceCode: this.PTZData.sources[0].camera.deviceCode, //设备编码
        channelCode: this.PTZData.sources[0].camera.channelCode, //通道编码
        pan: this.pan,
        tilt: this.tilt,
        zoom: this.zoom,
      };
      doPtzLocationCmd(params).then((res) => {
        if (res.code === 200) {
          $message.s("转动到ptz操作成功");
        } else {
          $message.a(res);
        }
      });
    },
    checknumber(String) {
      var reg = /^[0-9]+.?[0-9]*$/;
      if (reg.test(String)) {
        return true;
      }
      return false;
    },
    //转动到预置位
    gotoPrePoint() {
      if (this.selectedPre == "") {
        $message.e("请选择预置位");
        return;
      }
      let params = {
        deviceCode: this.PTZData.sources[0].camera.deviceCode, //设备编码
        channelCode: this.PTZData.sources[0].camera.channelCode, //通道编码
        presetId: this.selectedPre, //预置位 id
      };
      doControlPreset(params).then((res) => {
        if (res.code == 200) {
          $message.s("转到预置位操作成功");
        } else {
          $message.a(res);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ptz-box {
  /*height: 100%;*/
  position: absolute;
  top: 0;
  left: 0;
  /*width: 100%;*/

  .ptz-margin {
    margin-left: 12px;
    margin-top: 12px;

    .box-class {
      margin-bottom: 6px;
      display: flex;

      .box-left {
        width: 40px;
        height: 40px;
        background: rgba(23, 37, 55, 0.9);
        border-radius: 8px;
        font-size: 13px;
        color: #e8f3fe;
        line-height: 40px;
        text-align: center;
        margin-right: 4px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 24px !important;
        }
      }

      .box-right1 {
        width: 232px;
        height: 40px;
        background: rgba(23, 37, 55, 0.9);
        border-radius: 8px;
        display: flex;
        padding: 4px;

        /deep/ .el-input--small {
          width: 54px !important;
          margin-right: 4px !important;
        }

        /deep/ .el-input--small .el-input__inner {
          background: rgba(79, 159, 255, 0.2) !important;
          border-radius: 4px !important;
          border-color: transparent !important;
          font-size: 14px !important;
          font-weight: 400 !important;
          color: #e8f3fe;
          padding-left: 12px !important;
        }
      }

      .box-right2 {
        width: 232px;
        height: 40px;
        background: rgba(23, 37, 55, 0.9);
        border-radius: 8px;
        display: flex;
        padding: 4px;

        /deep/ .el-select {
          width: 170px !important;
          margin-right: 4px !important;
        }

        /deep/ .el-input--small .el-input__inner {
          background: rgba(79, 159, 255, 0.2) !important;
          border-radius: 4px !important;
          font-size: 14px !important;
          border: transparent !important;
          color: #e8f3fe;
          padding-left: 12px !important;
        }

        /deep/ .el-select .el-input .el-select__caret {
          color: rgba(232, 242, 254, 1) !important;
        }
      }

      .box-right3 {
        min-width: 174px;
        height: 40px;
        background: rgba(23, 37, 55, 0.9);
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding-right: 12px;

        div {
          font-size: 14px;
          font-weight: 400;
          color: #e8f3fe;
          margin-left: 12px;
        }
      }

      .button-box {
        width: 52px;
        height: 32px;
        background: rgba(79, 159, 255, 0.2);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        color: #e8f3fe;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        &:hover {
          opacity: 0.6;
        }
        &:active {
          opacity: 0.8;
        }
      }

      .placeholder-box > input::-webkit-input-placeholder {
        color: #e8f3fe !important;
        font-size: 14px !important;
        font-weight: 400 !important;
      }

      .placeholder-box > input:-moz-placeholder {
        color: #e8f3fe !important;
        font-size: 14px !important;
        font-weight: 400 !important;
      }

      .placeholder-box > input::-moz-placeholder {
        color: #e8f3fe !important;
        font-size: 14px !important;
        font-weight: 400 !important;
      }

      .placeholder-box > input:-ms-input-placeholder {
        color: #e8f3fe !important;
        font-size: 14px !important;
        font-weight: 400 !important;
      }
    }
  }
}

.g,
.ar-g {
  .ptz-box .ptz-margin .box-class {
    .box-left {
      background: linear-gradient(
          rgba(0, 0, 0, 0.9) 0%,
          rgba(73, 58, 20, 0.9) 100%
        ),
        linear-gradient(
          180deg,
          rgba(238, 227, 128, 0.9) 0%,
          rgba(105, 95, 42, 0.18) 81%,
          rgba(76, 66, 24, 0) 100%
        ),
        rgba(0, 0, 0, 0.45) !important;
      border: 1px solid rgba(110, 103, 78, 0.9) !important;
    }
    .box-right1,
    .box-right2,
    .box-right3 {
      /*那按钮统一填充#64562E 70%。描边 #6E674E纯色*/
      background: linear-gradient(
        360deg,
        rgba(43, 48, 59, 0.82) 0%,
        rgba(40, 32, 19, 0.82) 100%
      ) !important;
      border: 1px solid rgba(110, 103, 78, 0.9) !important;
    }
    .box-right1,
    .box-right2 {
      padding: 3px;
    }
    .box-left {
      i {
        text-shadow: none !important;
        color: #ffeeb1 !important;
      }
    }
    .box-right1 /deep/ .el-input--small .el-input__inner {
      background: rgba(100, 86, 46, 0.4) !important;
      color: #e4e7c1 !important;
    }
    .placeholder-box > input::-webkit-input-placeholder {
      color: #e4e7c1 !important;
    }
    .box-right2 {
      /deep/ .el-select .el-input .el-select__caret {
        color: #ffeeb1 !important;
      }
      /deep/ .el-input--small .el-input__inner {
        background: rgba(100, 86, 46, 0.4) !important;
        color: #e4e7c1 !important;
      }
    }
    .box-right3 div {
      color: #e4e7c1 !important;
    }
    /deep/ .el-input__inner {
      background: rgba(100, 86, 46, 0.4) !important;
      color: #e4e7c1 !important;
    }
    .button-box {
      background: rgba(100, 86, 46, 0.71) !important;
      color: #e4e7c1 !important;
      border: 0.5px solid rgba(100, 86, 46, 1) !important;
      line-height: 30px;
    }
  }
}
</style>
<style lang="scss" scoped>
.l2 {
  .ptz-box .ptz-margin .box-class {
    .box-left,
    .box-right1,
    .box-right2,
    .box-right3 {
      /*那按钮统一填充#64562E 70%。描边 #6E674E纯色*/
      background: linear-gradient(180deg, #132c2c 0%, #070e0d 100%) !important;
      border: 1px solid #075b4a !important;
      opacity: 0.9 !important;
      height: 40px !important;
    }
    .box-left {
      margin-right: 6px !important;
      i {
        text-shadow: none !important;
        color: #ffffff !important;
      }
    }
    .box-right1,
    .box-right2 {
      padding: 3px !important;
    }
    .box-right1 /deep/ .el-input--small .el-input__inner {
      background: rgba(2, 137, 109, 0.2) !important;
      color: rgba(255, 255, 255, 1) !important;
    }
    .placeholder-box > input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.7) !important;
    }
    .box-right2 {
      /deep/ .el-select .el-input .el-select__caret {
        color: #ffffff !important;
      }
      /deep/ .el-input--small .el-input__inner {
        background: rgba(2, 137, 109, 0.2) !important;
        color: rgba(255, 255, 255, 1) !important;
      }
    }
    .box-right3 div {
      color: #ffffff !important;
    }
    .button-box {
      background: rgba(2, 137, 109, 0.3) !important;
      color: #ffffff !important;
      border-radius: 4px !important;
      font-weight: normal !important;
      box-shadow: inset 0px 0px 3px 0px rgba(2, 137, 109, 0.6);
    }
  }

  .box-right2 /deep/ .el-icon-arrow-up:before {
    content: "";
    display: inline-block;
    background-image: url("../../../assets/image/playBack/down-l.png");
    width: 20px;
    height: 20px;
    margin-top: 6px;
    background-size: 100% 100%;
    transform: rotateZ(180deg);
  }
  .el-input,
  .el-select {
    &:not(.readonly):not(.disabled):hover:before {
      content: "";
      width: 100%;
      height: 100%;
      border: 1px solid rgba(2, 137, 109, 0.6);
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      pointer-events: none;
    }
    &:not(.readonly):not(.disabled):focus-within:before {
      content: "";
      width: 100%;
      height: 100%;
      border: 1px solid #02896d;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      pointer-events: none;
    }
  }
}
</style>
<style lang="scss" scoped>
.normal {
  .ptz-box {
    .ptz-margin {
      .box-class {
        .box-left,
        .box-right1,
        .box-right2,
        .box-right3 {
          border-color: transparent !important;
          background: rgba(0, 0, 0, 0.7) !important;
          border-radius: 8px !important;
          color: #fff !important;
          i {
            text-shadow: none !important;
            color: #fff !important;
          }
          .placeholder-box {
            /deep/ .el-input__inner {
              background: rgba(255, 255, 255, 0.2) !important;
              border-radius: 4px !important;
              border-color: transparent !important;
              color: #fff !important;
              &::placeholder {
                color: rgba(255, 255, 255, 0.7) !important;
              }
            }
            &.el-select /deep/ .el-input .el-select__caret {
              color: #fff !important;
            }
          }
          .button-box {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            &:hover {
              opacity: 0.6;
            }
            &:active {
              opacity: 0.8;
            }
          }
        }
        .box-right3 div {
          color: #fff !important;
        }
      }
    }
  }
}
</style>
